<template>
  <div class="apply-container">
    <div class="apply-header">
      <img class="apply-header__logo" src="~@/assets/image/logo_100.png">
      <div class="apply-header__user">
        你好：村户通001
      </div>
    </div>
    <div class="apply-content">
      <div class="apply-content__cards" v-if="step===1">
        <el-card class="apply-content__cards__item">
            <div class="title">个人开店</div>
            <div class="desc">适合个人/个体工商户入驻，提供身份证即可入驻</div>
            <cs-icon-svg name="user"></cs-icon-svg>
            <div>
              <el-button size="medium" class="btn-apply" @click="handleApply(1)">立即入驻</el-button>
            </div>
        </el-card>
        <el-card class="apply-content__cards__item">
          <div class="title">个人开店</div>
          <div class="desc">适合企业/企业入驻，提供营业执照等信息即可入驻</div>
          <cs-icon-svg name="company"></cs-icon-svg>
          <div>
            <el-button size="medium" class="btn-apply" @click="handleApply(2)">立即入驻</el-button>
          </div>
        </el-card>
      </div>
      <div class="apply-info" v-else-if="step===2 && type==1">
        <el-col :span="12" :offset="6">
          <el-form class="form"  ref="form" :model="form" label-position="left" label-width="180px">
            <div class="form-title">基本信息</div>
            <div class="form-panel">
              <el-form-item label="入驻人姓名">
                <el-input v-model="form.contact_name"></el-input>
              </el-form-item>
              <el-form-item label="入驻人邮箱">
                <el-input v-model="form.contact_email"></el-input>
              </el-form-item>
              <el-form-item label="入驻人手机号码">
                <el-input v-model="form.contact_mobile"></el-input>
              </el-form-item>
              <el-form-item label="入驻人身份证号码">
                <el-input v-model="form.id_card_numbber"></el-input>
              </el-form-item>
              <el-form-item label="身份证人面像" prop="form.id_card_emblem">
                <uploadThumb
                    :aspectRatio="16/9"
                    :defaultImage="thumbUrl"
                    @upload-success="cropThumbSuccess"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="身份证人像面" prop="form.id_card_emblem">
                <uploadThumb
                    :aspectRatio="16/9"
                    :defaultImage="thumbUrl"
                    @upload-success="cropThumbSuccess"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="手持身份证半身照片" prop="form.id_card_emblem">
                <uploadThumb
                    :aspectRatio="9/16"
                    :defaultImage="thumbUrl"
                    @upload-success="cropThumbSuccess"
                ></uploadThumb>
              </el-form-item>
            </div>
            
            <div class="form-title">店铺信息</div>
            <div class="form-panel">
              <el-form-item label="店铺名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="店铺简称">
                <el-input v-model="form.short_name"></el-input>
              </el-form-item>
              <el-form-item label="店铺描述">
                <el-input type="textarea" :rows="4" v-model="form.description"></el-input>
              </el-form-item>
            </div>
            <div class="action">
              <el-button class="btn-step" type="primary" @click="handleApply">确定</el-button>
            </div>
          </el-form>
        </el-col>
       
      </div>
      <div class="apply-info" v-else-if="step===2 && type==2">
        <el-col :span="12" :offset="6">
          <el-form class="form"  ref="form" :model="form" label-position="left" label-width="180px">
            <div class="form-title">入驻企业信息</div>
            <div class="form-panel">
              <el-form-item label="企业名称">
                <el-input v-model="form.contact_name"></el-input>
              </el-form-item>
              <el-form-item label="统计机构信用代码">
                <el-input v-model="form.contact_email"></el-input>
              </el-form-item>
              <el-form-item label="企业营业执照" prop="form.id_card_emblem">
                <uploadThumb
                    :aspectRatio="16/9"
                    :defaultImage="thumbUrl"
                    @upload-success="cropThumbSuccess"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="法人姓名">
                <el-input v-model="form.contact_mobile"></el-input>
              </el-form-item>
              <el-form-item label="法人手机号码">
                <el-input v-model="form.contact_mobile"></el-input>
              </el-form-item>
              <el-form-item label="法人身份证号码">
                <el-input v-model="form.id_card_numbber"></el-input>
              </el-form-item>
              
              <el-form-item label="身份证人像面" prop="form.id_card_emblem">
                <uploadThumb
                    :aspectRatio="16/9"
                    :defaultImage="thumbUrl"
                    @upload-success="cropThumbSuccess"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="身份证国徽面" prop="form.id_card_emblem">
                <uploadThumb
                    :aspectRatio="16/9"
                    :defaultImage="thumbUrl"
                    @upload-success="cropThumbSuccess"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="手持身份证半身照片" prop="form.id_card_emblem">
                <uploadThumb
                    :aspectRatio="9/16"
                    :defaultImage="thumbUrl"
                    @upload-success="cropThumbSuccess"
                ></uploadThumb>
              </el-form-item>
            </div>
            <div class="form-title">店铺信息</div>
            <div class="form-panel">
              <el-form-item label="店铺名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="店铺简称">
                <el-input v-model="form.short_name"></el-input>
              </el-form-item>
              <el-form-item label="店铺描述">
                <el-input type="textarea" :rows="4" v-model="form.description"></el-input>
              </el-form-item>
            </div>
            <div class="action">
              <el-button class="btn-step" type="primary" @click="handleApply">确定</el-button>
            </div>
          </el-form>
        </el-col>  
      </div>
      <br style='clear:both'/>
    </div>
  </div>
</template>

<script>
import util from '@/utils/util'
import uploadThumb from './components/cs-upload-thumb'
export default {
  name: 'apply',
  components: {
    uploadThumb
  },
  data() {
    return {
      step: 1,
      type: 1,
      thumbUrl: '',
      form: {
        contact_name: '',
        contact_telephone: '',
        contact_mobile: '',
        contact_email: '',
        id_card_numbber: '',
        id_card_face: '',
        id_card_emblem: '',
        id_card_handheld: '',
        company_name: '',
        credit_code: '',
        business_license: '',
        license_start: '',
        person_name: '',
        name: '',
        short_name: '',
        description: ''
      },
      formRules: {
        contact_name: [{ required: true, message: '请输入入驻人姓名', trigger: 'blur' }],
        contact_mobile: [{ required: true, message: '请输入入驻人手机号码', trigger: 'blur' }],
        contact_email: [{ required: true, message: '请输入入驻人邮箱地址', trigger: 'blur' }],
        id_card_numbber: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
        id_card_emblem: [{ required: true, message: '请上传身份证人像面', trigger: 'blur' }],
        id_card_handheld: [{ required: true, message: '请上传身份证国徽面', trigger: 'blur' }],
        credit_code: [{ required: true, message: '请上传持证半身照', trigger: 'blur' }],
        business_license: [{ required: true, message: '请上传营业执照', trigger: 'blur' }],
        license_start: [{ required: true, message: '请选择营业执照有效期起', trigger: 'blur' }],
        license_end: [{ required: true, message: '请选择营业执照有效期止', trigger: 'blur' }],
        person_name: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        short_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        description: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
      }
    }
  },
  created() {
    
  },
  methods: {
    handleApply(type) {
      this.step = 2
      this.type = type
    },
    cropThumbSuccess(data){

    }
  }
}
</script>

<style lang="scss">
  .apply-container{
    margin:0 auto;
    .apply-header {
      display: flex;
      background-color: #2C3643;
      justify-content: space-between;
      align-items: center;
      padding: 15px  50px;
      &__logo {
        width: 64px;
        height: 64px;
      }
      &__user {
        color: #fff;
      }
    }

    .apply-content {
      overflow-x: scroll;
      height: 1080px;
      &__cards {
        margin: 120px auto 0;
        display: flex;
        justify-content:space-between;
        align-items:center;
        width: 50%;
        &__item {
          border-radius: 10px;
          width: 500px;
          height: 500px;
          text-align: center;
          .title {
            margin-top: 32px;
            font-size: 25px;
            color: #333;
            font-weight: bold;
          }
          .desc {
            margin: 24px 0 16px;
            font-size: 20px;
            color: #333;
          }
          .btn-apply{
            margin-top: 32px;
            background-color: #ff5454;
            color: #fff;
            font-size: 16px;
            width: 50%;
            padding: 16px 0;
          }
        }
      }
      .apply-info {
        .form {
          margin-top: 15px;
          margin-bottom: 100px;
          border: 1px solid #f1eeee;
          &-title {
            font-size:  20px;
            padding: 16px 16px 16px 32px;
            border-bottom: 1px solid #f1eeee;
          }
          &-panel {
            padding: 30px 0;
            width: 60%;
            margin: 0 auto;
          }
          .action {
            text-align: center;
            padding-bottom: 20px;
            .btn-step {
              margin-top: 30px;
              width: 15%;
            }
          }
          
        }
      }
    }
  }
</style>
